<template>
    <div>
      <Header></Header>
      <!--详情开始-->
      <div class="i_bg">
        <div class="postion">

        </div>
        <div class="content">

          <div id="tsShopContainer">
            <div id="tsImgS">
              <a  title="/static/images" class="MagicZoom" id="MagicZoom">
                <img :src="goods.goodsImg" width="390" height="390" />
              </a>
            </div>

          </div>

          <div class="pro_des">
            <div class="des_name">
              <p>{{goods.goodsName}}</p>

            </div>
            <div class="des_price">
              本店价格：<b>￥{{goods.shopPrice}}</b><br />
              消费积分：<span>28R</span>
            </div>

            <div class="des_choice">
              <span class="fl">颜色选择：</span>
              <ul>
                <li>红色<div class="ch_img"></div></li>
                <li class="checked">白色<div class="ch_img"></div></li>
                <li>黑色<div class="ch_img"></div></li>
              </ul>
            </div>
            <div class="des_share">
              <div class="d_sh">
                分享
                <div class="d_sh_bg">
                  <a href="#"><img src="/static/images/sh_1.gif" /></a>
                  <a href="#"><img src="/static/images/sh_2.gif" /></a>
                  <a href="#"><img src="/static/images/sh_3.gif" /></a>
                  <a href="#"><img src="/static/images/sh_4.gif" /></a>
                  <a href="#"><img src="/static/images/sh_5.gif" /></a>
                </div>
              </div>
              <div class="d_care"><a onclick="ShowDiv('MyDiv','fade')">关注商品</a></div>
            </div>
            <div class="des_join">
              <div class="j_nums">
                <input type="text" v-model="goodsParameter.number" name="" class="n_ipt" />
                <input type="button" value="" @click="addShop" class="n_btn_1" />
                <input type="button" value="" @click="minuShop" class="n_btn_2" />
              </div>
              <span class="fl"><a @click="addBuyCar" ><img src="/static/images/j_car.png" /></a></span>
            </div>
          </div>


        </div>
        <div class="content mar_20">
         <!-- <div class="l_history">
            <div class="fav_t">用户还喜欢</div>
            <ul>
              <li v-for="x in list.slice(0,5)">
                <div class="img"><a href="#"><img :src="x.goodsImg" width="185" height="162" /></a></div>
                <div class="name"><a href="#">{{x.goodsName}}</a></div>
                <div class="price">
                  <font>￥<span>{{x.goodsPrice}}</span></font> &nbsp; 18R
                </div>
              </li>

            </ul>
          </div>-->
          <div class="l_list">

            <div class="des_border">
              <div class="des_tit">
                <ul>
                  <li class="current"><a href="#p_details">商品详情</a></li>
                </ul>
              </div>
              <div class="des_con" id="p_attribute">

                <table border="0" align="center" style="width:100%; font-family:'宋体'; margin:10px auto;" cellspacing="0" cellpadding="0">
                  <tr>
                    <td>商品名称：{{goods.goodsName}}</td>
                    <td>商品编号：{{goods.goodsId}}</td>
                  </tr>
                  <tr>
                    <td>商品产地：{{goods.goodsDetail.goodsPlace}}</td>
                    <td>品牌： {{goods.brandName}}</td>
                  </tr>
                </table>
              </div>
            </div>

            <div class="des_border" id="p_details">
              <div class="des_t">商品展示</div>
              <div class="des_con">
                <p align="center">
                  <img :src="goods.goodsDetail.goodsImgLeft" width="746" height="530" /><br /><br />
                  <img :src="goods.goodsDetail.goodsImgBottom" width="750" height="530" /><br /><br />
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--详情结束-->
        <Footer></Footer>
    </div>
</template>

<script>
  import Header from "../common/Header";
  import Footer from "../common/Footer";

    export default {
        name: "goodsDetail",
        data(){
          return{
            list:[],
            goods:{
              goodsImg:"",
              goodsName:"",
              goodsDetail:{
                goodsPlace:""
              },
            },
            goodsParameter: {//提交购物车的参数
               goodsId:"",//商品编号
               goodsName:"",//商品名称
               number:1,//商品购买数量
               goodsPrice:"",//商品价格
               goodsImg:"",//商品图片地址
               sellerId:""//卖家Id
            }
          }

       },
       components:{
        Header,
        Footer
      },
      methods:{
          addBuyCar(){//添加购物车
               //定义添加购物车数据
              this.goodsParameter.goodsId = this.goods.goodsId;
              this.goodsParameter.goodsName = this.goods.goodsName;
              this.goodsParameter.goodsPrice = this.goods.shopPrice;
              this.goodsParameter.goodsImg = this.goods.goodsImg;
              this.goodsParameter.sellerId = this.goods.sellerId;

              const self =this;
              const http = this.$http.post("/server-buy-car/buyCar/car",this.goodsParameter);
              //定义回调
              http.then(function (rs) {
                  if(rs.data.code==200){
                        self.$message(rs.data.msg);
                  }
              })
          },
        addShop(){//商品数量自增
            this.goodsParameter.number++;

        },
        minuShop(){//商品数量自减
          this.goodsParameter.number--;
          if(this.goodsParameter.number<=1){
            this.goodsParameter.number=1;
          }
        }
      },
      mounted() {
          //获取商品对象数据
          this.goods = JSON.parse(localStorage.getItem("x"));
          console.log(this.goods)
      }

    }
</script>

<style scoped>

</style>
